<template>
  <div>
    <h3 style="text-align: center;">组合式API练习demo</h3>
    <p class="header-title">组件使用+基础计时器</p>
    <ButtonCounter/>
    <ButtonCounter/>
    <ButtonCounter/>
    <p>父级计算器变量 count：{{ count }}</p>
    <div>
      <h4 class="header-title">模板引用</h4>
      <input ref="inputRef">
    </div>
    <div class="parent-component-box">
      <h4 class="title">父子组件</h4>
      <p class="choosen">当前阅读的书：{{ choosen }}</p>
      <Blogger @choosen-book="handleChoosenBook"/>
    </div>
    <div>
      <h4 class="header-title">插槽</h4>
      <SlotBox />
      <SlotBox>
        <template #defalut>
          <div class="slot-text">{{ slotText }}</div>
        </template>
      </SlotBox>
      <SlotBox>
        <template #defalut><div class="slot-text">这是一段来自父级[默认]插槽的内容</div></template>
        <template #customParam="{greetMsg}"><div class="slot-text">这是一段来自父级[具名]插槽的内容,然后调用子组件的内容：{{greetMsg}}</div></template>
      </SlotBox>
    </div>
    <div>
      <h4 class="header-title">v-model双向绑定</h4>
      <input v-model="inputValue">
      <p>input值：{{inputValue}}</p>
    </div>
    <div>
      <h4 class="header-title">依赖注入</h4>
      <p></p>
    </div>
  </div>
</template>
<script setup>
/**
 * 使用setup属性
 */
import { ref, computed, onMounted, onBeforeMount, onBeforeUnmount, onUnmounted, watch, provide } from 'vue';
import ButtonCounter from './components/ButtonCounter.vue';
import Blogger from './components/Blogger.vue';
import SlotBox from './components/SlotBox.vue';
import { inJectionKey } from './components/keys'

const count = ref(0);
const inputRef = ref(null);
const choosen = ref('未选中')
const inputValue = ref('')
const slotText = ref('现在写下的内容是在父组件这种定义的 我就看看能不能显示在插槽里！！')
/**
 *  🍓provide & inject 依赖注入
 */
provide(inJectionKey, {content:'【依赖注入】我是一个组件级共享的变量'})
provide('parentCounter', {
  count,
  increment
})

/**
 * 🍓计算属性
 */
const tenValue = computed(() => {
  return count.value > 10 ? '大于10' : '小于10';
})
/**
 * 🍓监听属性
 */
watch(
  () => count.value,
  (newVal, oldValue) => {
    console.log('watch 执行监听count变化', newVal+'==>'+oldValue)
  },
  {
    // immediate: true, //立即执行
    deep: true, //深度监听
    once: true, //只触发一次
    flush: 'post' //在下一个循环运行
  }
)
/**
 * 🍓事件
 */
const handleChoosenBook = (book) => {
  choosen.value = book
}
function increment () {
 count.value++;
}
/**
 * 🍓生命周期
 */
console.log('setup 标签内部执行')

onBeforeMount(() => {
  console.log('onBeforeMount 执行')
})
onMounted(() => {
  console.log('onMounted 执行')  
  inputRef.value.focus()
})
onBeforeUnmount(() => {
  console.log('onBeforeUnmount 执行') 
})
onUnmounted(() => {
  console.log('onUnmounted 执行')
})
</script>
<style scoped>
.parent-component-box {
  border: 1px solid gray;
  padding: 10px;
  margin: 10px;
  .title {
    text-align: center;
  }
  .choosen {
    color: blue;
  }
}
.slot-text {
  color: burlywood;
}
.header-title {
  color: chocolate;
  font-weight: bolder;
}
</style>